<template>
    <div>
        <pdf
            ref="pdf"
            v-for="i in numPages"
            :key="i"
            :src="src"
            :page="i"
            @loaded="docLoaded" 
            @page-loaded ="pageLoaded"
        ></pdf>
    </div>
</template>
<script>
import pdf from "vue-pdf";
export default {
    components: {
        pdf,
    },
    data() {
        return {
            src:"",
            numPages: null, // pdf 总页数
        };
    },
    mounted() {
        this.getNumPages();
    },
    methods: {
        getNumPages() {
            var headers = {
                Authorization: "Bearer SOME_TOKEN",
                "x-ipp-device-uuid": "SOME_UUID",
                "x-ipp-client": "SOME_ID",
                "x-ipp-client-version": "SOME_VERSION",
            };
            var loadingTask = pdf.createLoadingTask({
                url: "http://image.cache.timepack.cn/nodejs.pdf",
                httpHeaders: headers,
            });
            loadingTask.promise
                .then((pdf) => {
                    console.log('11',pdf)
                    this.src=loadingTask;
                    this.numPages = pdf.numPages;
                })
                .catch((err) => {
                    console.error("pdf 加载失败", err);
                });
        },
        docLoaded(){
            console.log('加载种')
        },
        pageLoaded(){
            console.log('加载结束')
        }
    },
};
</script>